<template>
  <div>
    <ul>
        <li v-for="m in msg" :key="m.id">
            <!-- <a href="/message1">{{m.title}}</a>&nbsp;&nbsp; -->
            <!-- 字符串写法,query 传参-->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
            <!-- 字符串写法,params 传参 -->
            <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.content}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
            <!-- 对象写法 -->
            <!-- <router-link :to="{
                // path: '/home/message/detail',
                name: 'xiangqing',
                query: {
                    id: m.id,
                    title: m.title,
                    content: m.content
                }
            }">
                {{m.title}}
            </router-link>&nbsp;&nbsp; -->

            <router-link :to="{
                name: 'xiangqing',//params 传参, 不可以使用path 跳转
                params: {
                    id: m.id,
                    title: m.title,
                    content: m.content
                }
            }">
                {{m.title}}
            </router-link>&nbsp;&nbsp;
            <button @click="pushShow(m)">push查看</button>
            <button @click="replaceShow(m)">repace查看</button>
        </li>
    </ul>
    <router-view></router-view>
</div>
</template>

<script>
export default {
    name: 'MessageComponent',
    data() {
        return {
            msg: [{
                id: 1,
                title: 'message001',
                content: 'message001content'
            }, {
                id: 2,
                title: 'message002',
                content: 'message002content'
            }, {
                id: 3,
                title: 'message003',
                content: 'message003content'
            }]
        }
    },
    methods: {
        pushShow(m) {
            // this.$router.push(`/home/message/detail/${m.id}/${m.title}/${m.content}`)
            // this.$router.push(`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`)
            // this.$router.push({
            //     path: '/home/message/detail',
            //     query: {
            //         id: m.id,
            //         title: m.title,
            //         content: m.content
            //     }
            // })
            this.$router.push({
                name: 'xiangqing',
                params: {
                    id: m.id,
                    title: m.title,
                    content: m.content
                }
            })
        },
        replaceShow(m){
            // this.$router.replace(`/home/message/detail/${m.id}/${m.title}/${m.content}`)
            // this.$router.replace(`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`)
            // this.$router.replace({
            //     path: '/home/message/detail',
            //     query: {
            //         id: m.id,
            //         title: m.title,
            //         content: m.content
            //     }
            // })
            this.$router.replace({
                name: 'xiangqing',
                params: {
                    id: m.id,
                    title: m.title,
                    content: m.content
                }
            })
        }
    },
}
</script>

<style>

</style>